<template>
    <div class="contain">
      <div id="cesiumContainer" class=" ">
        <div class="title">
          <div class="d-flex" style="padding-top: 70px; width: 980px">
            <img
              :src="back"
              alt=""
              style="width: 26px; height: 26px; margin-top: 20px"
            />
            <div class="title_back">返回</div>
          </div>
  
          <div class="title_text"><div>海绵城市一张图</div></div>
          <div class="title_time">
            <div
              style="
                margin-left: 200px;
                font-size: 20px;
                font-family: 'OPPOSans';
                color: rgba(230, 253, 255, 0.5);
              "
            >
              查询内容：
            </div>
            <div
              style="
                border: #5ce1ff solid 1px;
                border-radius: 20px;
                background-color: rgba(20, 67, 81, 0.9);
              "
            >
              <el-input
                v-model="searchValue"
                class="m-1"
                size="small"
                placeholder="请输入"
              >
                <!-- <i slot="prefix" class="el-icon-user" @click="test"></i> -->
                <i slot="prefix">
                  <img
                    style="width: 16px; height: 16px"
                    src="../assets/image/underGround/back.png"
                  />
                </i>
              </el-input>
            </div>
            <div
              style="
                font-size: 32px;
                font-family: 'OPPOSans';
                font-weight: bold;
                color: #e6fdff;
              "
            >
              {{ nowdate }}
            </div>
            <div style="font-size: 28px; font-family: 'OPPOSans'; color: #e6fdff">
              {{ nowTime }}
            </div>
  
            <div style="font-size: 28px; font-family: 'OPPOSans'; color: #e6fdff">
              | {{ weekday }}
            </div>
          </div>
          <div></div>
        </div>
        <!-- 左图表 -->
        <div class="other">
          <modelTemplete
            class="w-100 h-100"
            :split="activeNav.title === '应急指挥'"
          >
            <template #top style="left: 0px">
              <component :is="calcComponent(1)"></component>
            </template>
            <template #middle>
              <component :is="calcComponent(2)"></component>
            </template>
            <template #bottom>
              <component :is="calcComponent(3)"></component>
            </template>
          </modelTemplete>
        </div>
        <!-- 右图表 -->
        <div class="other" style="right: 0px">
          <modelTemplete>
            <template #top>
              <component :is="calcComponent(4)"></component>
            </template>
            <template #middle>
              <component :is="calcComponent(5)"></component>
            </template>
            <template #bottom>
              <component :is="calcComponent(6)"></component>
            </template>
          </modelTemplete>
        </div>
        <!-- 模糊 -->
        <div class="map-overlay"></div>
        <!-- 下方导航 -->
  
        <div class="bottomNav">
          <!-- <div
            v-for="(item, index) in navList"
            @click="(activeNav = item), (activeItem = index)"
            style="width: 8%; display: flex; justify-content: space-around"
          >
            <div>
              <div
                :style="{ backgroundImage: 'url(' + item.bk + ')' }"
                :class="activeItem == index ? 'itemActive' : 'itemUnActive'"
              ></div>
              <div>
                {{ item.title }}
              </div>
            </div>
          </div> -->
        </div>
  
        <div class="bottomitem">
          <div
            v-for="(item, index) in navList"
            @click="(activeNav = item), (activeItem = index)"
            style="width: 8%; display: flex; justify-content: space-around"
          >
            <div>
              <div
                :style="{ backgroundImage: 'url(' + item.bk + ')' }"
                :class="activeItem == index ? 'itemActive' : 'itemUnActive'"
              ></div>
              <div :class="activeItem == index ? 'Activetext' : 'UnActivetext'" >
                {{ item.title }}
              </div>
            </div>
          </div>
        </div>
        <div class="state" id="stateShow">
          <div class="box">
            <div class="box-wrap">
              <div class="poptitle">
                <div class="poptitle_text" id="title"></div>
                <div class="clopoptitle_close" @click="closeClick()">X</div>
              </div>
              <div class="content">
                <div class="popInfo">
                  <div class="pop_distribute"></div>
                  <div class="pop_value"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script setup lang="ts">
  import { onMounted } from "vue";
  import { useRouter } from "vue-router";
  import { useStore } from "vuex";
  import modelTemplete from "@/components/project/modelTemplete.vue";
  import back from "@/assets/image/underGround/back.png";
  import zhgl_gx from "@/assets/image/underGround/zhgl_gx.png";
  import zhgl_length from "@/assets/image/underGround/zhgl_length.png";
  import bar_01 from "@/assets/image/underGround/bar_01.png";
  import bar_02 from "@/assets/image/underGround/bar_02.png";
  import bar_03 from "@/assets/image/underGround/bar_03.png";
  import bar_04 from "@/assets/image/underGround/bar_04.png";
  
  import Epsg4548TilingScheme from "@/utils/epsgTanselayte.js";
  import API from "@/network/api";
  import _ from "lodash";
  import { W3d } from "@/assets/test/W3d";
  import { number } from "echarts";
  import { useFields } from "@/hook/useFields";
  
  
  import sblx from "./spone/detection/sblx/sblx.vue";
  import sbyxzt from "./spone/detection/sbyxzt/sbyxzt.vue";
  import yjxx from "./spone/detection/yjxx/yjxx.vue";
  import shjpj from "./spone/detection/shjpj/shjpj.vue";
  import ysly from "./spone/detection/ysly/ysly.vue";
  import jxkh from "./spone/detection/jxkh/jxkh.vue";
  
  import yj_zygl from "./spone/emergencyPlan/yj_zygl/yj_zygl.vue";
  import yjya from "./spone/emergencyPlan/yjya/yjya.vue";
  import yjsj from "./spone/emergencyPlan/yjsj/yjsj.vue";
  import yjsj1 from "./spone/emergencyPlan/yjsj1/yjsj1.vue";
  import yjsj2 from "./spone/emergencyPlan/yjsj2/yjsj2.vue";
  import all from "./spone/projectManage/all/all.vue";
  import plan from "./spone/projectManage/plan/plan.vue";
  import summary from "./spone/projectManage/summary/summary.vue";
  
  
  import shen from "./spone/frontPage/shen/shen.vue";
  import xu from "./spone/frontPage/xu/xu.vue";
  import zhi from "./spone/frontPage/zhi/zhi.vue";
  import jin from "./spone/frontPage/jin/jin.vue";
  import lao from "./spone/frontPage/lao/lao.vue";
  import pai from "./spone/frontPage/pai/pai.vue";
  
  
  const activeItem = ref(0);
  const navList = [
  {
      title: "建设管理",
      componentList: [all, plan,summary],
      bk: bar_01,
    },
  {
      title: "首页",
      componentList: [shen, xu, zhi,jin,pai,lao],
      bk: bar_04,
    },
  
    {
      title: "应急指挥",
      componentList: [yj_zygl, yjya, "", yjsj, yjsj1, yjsj2],
      bk: bar_02,
    },
    {
      title: "运行检测及评价",
      componentList: [sblx, sbyxzt, yjxx, shjpj, ysly, jxkh],
      bk: bar_03,
    },
    
  ];
  const activeNav = shallowRef(navList[0]);
  
  const searchValue = ref();
  const formateDate = () => {
    let now1 = new Date();
    var hours = now1.getHours(); // 获取小时
    var minutes = now1.getMinutes(); // 获取分钟
    var seconds = now1.getSeconds(); // 获取秒钟
    return hours + ":" + minutes + ":" + seconds;
  };
  // 格式化日期时间
  const nowdate = ref("");
  // var nowTime = hours + ":" + minutes + ":" + seconds;
  const nowTime = ref("");
  const weekday = ref("");
  var weekdays = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ];
  const router = useRouter();
  const store = useStore();
  const w3d = new W3d();
  let viewer = w3d.View;
  let projectInfo: Map<string, any> = new Map<string, any>();
  projectInfo.set("pipeGalaryName", "管廊名称");
  projectInfo.set("length", "管廊长度");
  projectInfo.set("material", "管廊材质");
  projectInfo.set("constructionMethod", "施工方法");
  projectInfo.set("onwerShipUnit", "权属单位");
  projectInfo.set("constructionUnit", "施工单位");
  projectInfo.set("surperviceUnit", "监理单位");
  projectInfo.set("startTime", "开工时间");
  projectInfo.set("endTime", "竣工时间");
  projectInfo.set("status", "状态");
  const openPop = ref(false);
  let entyImgMap: Map<string, any> = new Map<string, any>();
  entyImgMap.set("工程", zhgl_gx);
  entyImgMap.set("设施", zhgl_length);
  function leftDownAction(viewer: any, htmlId: string) {
    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handler.setInputAction(function (movement: any) {
      console.log(movement,'pick');
      
      var picked = viewer.scene.pick(movement.position);
      if (Cesium.defined(picked) && picked.id.id) {
        Popupposition(picked, htmlId, viewer);
        openPop.value = true;
        let item: any = picked.id._properties;
        var stateShowDiv = document.getElementById("stateShow"); // 首先获取 'stateShow' 元素
        var contentDiv = (stateShowDiv as any).querySelector(".content");
        contentDiv.innerHTML = "";
        (document.getElementById as any)("title").innerHTML =
          picked.id._properties.title;
        console.log(document.getElementById("state"));
        let cesiumObject = picked.id._properties;
        cesiumObject.propertyNames.forEach((propertyName: any) => {
          if (propertyName == "title") return;
          // 获取属性值
          var propertyValue =
            cesiumObject[propertyName] instanceof Cesium.Property
              ? cesiumObject[propertyName]._value
              : cesiumObject[propertyName];
  
          // 创建 popInfo 元素
          var popInfoDiv = document.createElement("div");
          popInfoDiv.className = "popInfo";
          popInfoDiv.style.width = "100%";
          popInfoDiv.style.height = "40px";
          popInfoDiv.style.display = "flex";
          popInfoDiv.style.fontFamily = '"OPPOSans-Regular", sans-serif'; // 添加回退字体
          popInfoDiv.style.fontSize = "20px";
          popInfoDiv.style.lineHeight = "30px";
          popInfoDiv.style.color = "rgba(230, 253, 255, 1)";
          popInfoDiv.style.padding = "10px";
          // 创建并设置 pop_distribute 元素
          var distributeDiv = document.createElement("div");
          distributeDiv.className = "pop_distribute";
          distributeDiv.textContent = projectInfo.get(propertyName);
          distributeDiv.style.width = "50%";
          // 创建并设置 pop_value 元素
          var valueDiv = document.createElement("div");
          valueDiv.className = "pop_value";
          valueDiv.textContent = propertyValue;
          valueDiv.style.width = "50%";
  
          // 将 distributeDiv 和 valueDiv 添加到 popInfoDiv
          popInfoDiv.appendChild(distributeDiv);
          popInfoDiv.appendChild(valueDiv);
  
          // 将 popInfoDiv 添加到 contentDiv
          contentDiv.appendChild(popInfoDiv);
        });
        // document.getElementById('state').innerHTML = monitoItems.data.constructionMethod
        // document.getElementById('type').innerHTML = monitoItems.data.type
      } else {
        return;
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  }
  
  function Popupposition(e: any, htmlId: any, viewer: any) {
    console.log(e.id.location, "smdfks");
  
    let data = e.id;
    //经纬度转为世界坐标
    let gisPosition = Cesium.Cartesian3.fromDegrees(
      data.location.longitude,
      data.location.latitude,
      0
    );
  
    (document.getElementById as any)(htmlId).style.display = "block"; //弹出信息框
    //实时更新位置
    viewer.scene.postRender.addEventListener(() => {
      //转化为屏幕坐标
      var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
        viewer.scene,
        gisPosition
      );
  
      (document.getElementById as any)(htmlId).style.left =
        windowPosition.x + 150 + "px";
      (document.getElementById as any)(htmlId).style.top =
        windowPosition.y - 220 + "px";
  
      //解决滚动不隐藏问题
      const camerPosition = viewer.camera.position;
      let height =
        viewer.scene.globe.ellipsoid.cartesianToCartographic(
          camerPosition
        ).height;
      height += viewer.scene.globe.ellipsoid.maximumRadius;
      if (!openPop.value) {
        (document.getElementById as any)(htmlId).style.display = "none";
        return;
      }
      if (
        !(Cesium.Cartesian3.distance(camerPosition, gisPosition) > height) &&
        viewer.camera.positionCartographic.height < 50000000
      ) {
        (document.getElementById as any)(htmlId).style.display = "block";
      } else {
        (document.getElementById as any)(htmlId).style.display = "none";
      }
    });
  }
  
  const closeClick = () => {
    openPop.value = false;
    (document.getElementById as any)("stateShow").style.display = "none";
    console.log(
      (document.getElementById as any)("stateShow").style.display,
      "sndjksnk"
    );
  };
  onMounted(async () => {
    (document.getElementById as any)("stateShow").style.display = "none";
    setInterval(() => {
      nowTime.value = formateDate();
      var now = new Date();
      var year = now.getFullYear(); // 获取年份
      var month = now.getMonth() + 1; // 获取月份，月份是从0开始的，所以需要+1
      var day = now.getDate(); // 获取日
      nowdate.value = year + "-" + month + "-" + day;
      weekday.value = weekdays[now.getDay()];
    });
    console.log('onMounted');
    
    w3d.createmap();
    let viewer = w3d.view;
    w3d.addEntity({
      viewer: viewer,
      data: useFields().fakeData,
      tributeMap: projectInfo,
      imgMap: entyImgMap,
      htmlId: "stateShow",
    });
    leftDownAction(viewer, "stateShow");
  
    // http://10.132.250.253:7080/server/rest/services/Hosted/A_WXYX_WHS_2m/MapServer/WMTS/tile/1.0.0/Hosted_A_WXYX_WHS_2m/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}
    w3d.flyTo(viewer, "ll", [114.22441796634227, 30.52060324904437, 9000], []);
  
    //     url:   "http://10.132.250.253:7080/server/rest/services/Hosted/A_WXYX_WHS_2m/MapServer/WMTS/tile/1.0.0/Hosted_A_WXYX_WHS_2m/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}",
    //     layer: "Hosted_A_WXYX_WHS_2m",
    //     style: "default",
    //     tileMatrixSetID: "default028mm",
    //     format: "image/jpgpng",
    //     tilingScheme: new Cesium.GeographicTilingScheme(),
    //     maximumLevel: 19,
    //     tileMatrixLabels: [
    //       "0",
    //       "1",
    //       "2",
    //       "3",
    //       "4",
    //       "5",
    //       "6",
    //       "7",
    //       "8",
    //       "9",
    //       "10",
    //       "11",
    //       "12",
    //       "13",
    //       "14",
    //       "15",
    //       "16",
    //       "17",
    //       "18",
    //       "19",
    //     ],
    //   });
    //   var imageryLayers = viewer.imageryLayers;
    //   viewer.imageryLayers.addImageryProvider(provider);
  
    // viewer.imageryLayers.addImageryProvider(
    //     new Cesium.WebMapTileServiceImageryProvider({
    //       url: "http://10.132.250.253:7080/server/rest/services/Hosted/A_DOM_HY/MapServer/WMTS/tile/1.0.0/Hosted_A_WXYX_WHS_2m/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}",
    //       layer: 'Hosted_A_DOM_HY',
    //       style: 'default',
    //       tileWidth: 256,
    //       tileHeight: 256,
    //       format : 'image/jpgpng',
    //       rectangle: new Cesium.Rectangle(
    //         Cesium.Math.toRadians(114.1190753701459), // WGS84BoundingBox LowerCorner longitude
    //         Cesium.Math.toRadians(30.47519248090922), // WGS84BoundingBox LowerCorner latitude
    //         Cesium.Math.toRadians(114.28593251541136), // WGS84BoundingBox UpperCorner longitude
    //         Cesium.Math.toRadians(30.605212952031277)
    //       ),
    //       tileMatrixSetID : 'default028mm',
    //       tileMatrixLabels: [
    //       "0",
    //       "1",
    //       "2",
    //       "3",
    //       "4",
    //       "5",
    //       "6",
    //       "7",
    //       "8",
    //       "9",
    //       "10",
    //       "11",
    //       "12",
    //       "13",
    //       "14",
    //       "15",
    //       "16",
    //       "17",
    //       "18",
  
    //     ],
    //       maximumLevel : 4,
    //       tilingScheme: new Epsg4548TilingScheme({
    //         numberOfLevelZeroTilesX: 1,
    //         numberOfLevelZeroTilesY: 1,
    //         rectangleSouthwestInMeters: new Cesium.Cartesian2(3372826.2075436576, 511433.9814651235),
    //         rectangleNortheastInMeters: new Cesium.Cartesian2(3387211.888013945, 527419.7536420493)
    //       }),
    //     })
    // );
  });
  const calcComponent = (num: number) => {
    return (activeNav.value.componentList as any)[num - 1];
  };
  </script>
  
  <style scoped lang="scss">
  .contain {
    width: 7072px;
    height: 1560px;
  }
  #cesiumContainer {
    width: 100%;
    height: 100%;
    z-index: 1;
    position: relative;
  }
  .title {
    top: -7px;
    width: 100%;
    height: 140px;
    background: url("../assets/image/underground/bigTitle.png");
    background-size: 100% 100%;
    padding-left: 80px;
    background-repeat: no-repeat;
    position: absolute;
    display: flex;
    z-index: 4;
    &_back {
      height: 46px;
      font-size: 26px;
      font-family: "OPPOSans";
      color: #03e6fe;
      margin-bottom: auto;
      margin-top: auto;
    }
    &_text {
      margin: auto;
      text-align: center;
      color: #fff;
      font-family: "旁门正道";
      font-size: 76px;
    }
    &_time {
      width: 1000px;
      text-align: center;
      color: #fff;
      display: flex;
      div {
        margin-bottom: auto;
        margin-top: auto;
        margin-left: 20px;
      }
    }
  }
  .other {
    // margin-top: 160px;
    // margin-bottom:88px;
    width: 2000px;
    height: 100%;
    background-color: #032332;
    //  height: 1312px;
    position: absolute;
    z-index: 3;
    padding: 160px 0 0 0;
  }
  .bottomNav {
    width: 3000px;
    height: 80px;
    position: absolute;
    bottom: 0;
    left: calc(50% - 1500px);
    background: url("../assets/image/underGround/bar_bk.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 2;
    display: flex;
    justify-content: center;
  }
  .bottomitem{
    width: 3000px;
    height: 160px;
    position: absolute;
    bottom: 0;
    left: calc(50% - 1500px);
    z-index: 2;
    display: flex;
    justify-content: center;
  }
  
  .itemActive {
    height: 50%;
    width: 150px;
    background-repeat: no-repeat;
    background-position: center; /* 背景图片居中显示 */
  }
  .Activetext{
    color: #5CE1FF ;
    text-align: center;
      font-family: "旁门正道";
  }
  .UnActivetext{
    text-align: center;
  
    font-family: "旁门正道";
    color: rgba(166, 218, 223, 0.5); /* 选中时的字体颜色 */
  }
  .itemUnActive {
    margin-top: 40px;
    width: 150px;
    height: 50%;
    background-repeat: no-repeat;
    background-position: center; /* 背景图片居中显示 */
  
  }
  .map-overlay {
    width: 100%;
    height: 100%;
    left: 0;
    background: url("../assets/image/underground/bk_all.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 2;
    pointer-events: none;
  }
  .state {
    width: 500px;
    position: absolute;
    background-color: rgba(4, 55, 61, 0.5);
    z-index: 1;
  }
  .poptitle {
    width: 100%;
    height: 50px;
    display: flex;
    font-size: 26px;
    color: rgba(255, 255, 255, 1);
    background: linear-gradient(
      to right,
      rgba(92, 225, 255, 1) 0%,
      rgba(92, 225, 255, 0) 100%
    );
    font-family: "优设标题黑";
    line-height: 50px;
    &_text {
      width: 90%;
      padding-left: 20px;
    }
  }
  </style>
  